body{
    background-color: #27c4c9;
}
.clock {
    position: relative;
    top: 250px;
    width: 200px;
    height: 200px;
    margin: 50px auto;
    border-radius: 50%;
    background-color: #edf1f1;
    box-shadow: 0 0 20px rgba(0, 0, 0, .1);
}

.hour-hand, .minute-hand, .second-hand {
    position: absolute;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: #000;
    transform-origin: bottom center;
}

.hour-hand {
    width: 8px;
    height: 60px;
    top: 50%;
    left: 50%;
    margin-left: -4px;
    margin-top: -60px;
}

.minute-hand {
    width: 6px;
    height: 80px;
    top: 50%;
    left: 50%;
    margin-left: -3px;
    margin-top: -80px;
}

.second-hand {
    width: 4px;
    height: 100px;
    top: 50%;
    left: 50%;
    margin-left: -2px;
    margin-top: -100px;
}

.center-circle {
    position: absolute;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: #000;
    top: 50%;
    left: 50%;
    margin-left: -6px;
    margin-top: -6px;
}